<template>
  <div class="header-container">
    <div class="container-l">
      <div style="width:40px;height:40px"><img style="width:100%;height:100%" src="@/assets/edu.png"/></div>
      <div><h1 style="font-style:italic;color:purple">乡村支教平台</h1></div>

      <div><el-button :class="activityClass==1? 'active':''" @click="homePage" style="background:transparent;border:0;font-size:18px;color:#fff;padding-right:0">首页</el-button></div>
      <div><el-button :class="activityClass==2? 'active':''" @click="applyPage" style="background:transparent;border:0;font-size:18px;color:#fff;padding-right:0">支教活动</el-button></div>
      <div><el-button :class="activityClass==3? 'active':''" @click="sharePage" style="background:transparent;border:0;font-size:18px;color:#fff;padding-right:0">信息分享</el-button></div>
      <div><el-button :class="activityClass==4? 'active':''" @click="bookPage" style="background:transparent;border:0;font-size:18px;color:#fff;padding-right:0">线上图书馆</el-button></div>
    </div>
    <div class="container-r">
      <div @click="mainPage">{{role=='3'?'管理中心':'个人中心'}}</div>
      <div style="color:purple;font-size:15px;font-weight:700" v-if="!token" @click="loginPage">您好，请登录</div>
      <div style="color:purple;font-size:15px;font-weight:700" v-if="token">欢迎您，{{info.t_username || info.s_username || info.a_username}}</div>
      <div v-if="token">
                <el-button @click="logoutPage" size="mini" icon="el-icon-switch-button" style="padding:0;background-color:transparent;border:0;color:#fff;font-size:15px">退出登录</el-button>
</div>
      <div style="width:53px;height:53px"><img style="width:100%;height:100%;border-radius:50%;border:1px solid #fff" :src="imgSrc? (evUrl+imgSrc):(evUrl+'56b731c4732fab16e2558f9237d04e60.png')"/></div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 获取角色值
      role: '',
      // 样式值
      activityClass: 1,
      evUrl: this.$evUrl,
      // token值
      token: '',
      // 用户信息
      info: {},
      // 头像
      imgSrc: ''
    }
  },
  methods: {
    // 首页
    homePage () {
      if (this.$route.path === '/' || this.$route.path === '/home') {
        return false
      }
      this.activityClass = 1
      this.$router.push('/')
    },
    // 支教活动
    applyPage () {
      if (this.$route.path === '/apply') {
        return false
      }
      this.activityClass = 2
      this.$router.push('/apply')
    },
    // 信息分享
    sharePage () {
      this.activityClass = 3
      if (this.$route.path === '/myShare') {
        return false
      }
      this.$router.push('/myShare')
    },
    // 线上图书馆
    bookPage () {
      this.activityClass = 4
      if (this.$route.path === '/bookDisplay') {
        return false
      }
      this.$router.push('/bookDisplay')
    },
    // 登录
    loginPage () {
      // console.log(this.$route.path)
      this.$router.push('/login')
    },
    // 个人中心页
    mainPage () {
      if (!this.token) {
        return this.$message.info('请登录')
      }
      this.$router.push('/main')
    },
    // 退出登录
    logoutPage () {
      window.localStorage.clear()
      this.token = ''
      this.$store.commit('deleteTagAll')
      this.onloadVue()
    },
    // 退出刷新
    onloadVue () {
      this.$store.commit('reOnload2')
    },
    // 第一次进来改变导航颜色
    changeColor () {
      // console.log(this.$route.path)
      if (this.$route.path === '/' || this.$route.path === '/home') {
        this.activityClass = 1
      } else if (this.$route.path === '/apply') {
        this.activityClass = 2
      } else if (this.$route.path === '/myShare') {
        this.activityClass = 3
      } else if (this.$route.path === '/bookDisplay') {
        this.activityClass = 4
      }
    }
  },
  // 拿到信息
  mounted () {
    this.info = JSON.parse(window.localStorage.getItem('userInfo'))
    this.token = window.localStorage.getItem('token')
    this.imgSrc = window.localStorage.getItem('imageSrc')
    this.changeColor()
    if (this.token) {
      this.role = JSON.parse(window.localStorage.getItem('userInfo')).role
    }
  }

}
</script>
<style scoped lang='less'>
.header-container{
  color:#fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:60px;
  background:#C8E0E0;
  .container-l{
    margin-left:20px;
    display:flex;
    justify-content: start;
    align-items: center;
    div{
      // margin-left:18px;
      cursor:pointer;
      color:#fff;
    }
  }
  .container-r{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-right: 20px;
    div{
      margin-right: 18px;
      cursor:pointer;
    }
  }
  .active {
 /* background: #eee; */
   color:orange !important;
  //  font-weight: bolder;
}
}

</style>
